import React, {Component} from 'react';

export default class IconCell extends Component {
  clickHandler() {
    this.props.onClick({
      platform:this.props.platform,
      isBeta:this.props.isBeta,
      isSelected:this.props.isSelected,
      unique:this.props.unique
    });
  }

  renderBeta() {
    return (
      <div>
        <div className={'corner-icon-'+this.props.platform}></div>
        <div className="corner-desc">Beta</div>
      </div>
    );
  }

  render() {
    let currentStyle = {};

    if (this.props.platform === 'ios') {
      if (this.props.isBeta) {
        currentStyle.marginLeft = '-4px';
      }
    }

    if (this.props.platform === 'android') {
      if (this.props.isBeta) {
        currentStyle.marginLeft = '-2px';
      }
    }

    return (
      <div
        onClick={this.clickHandler.bind(this)}
        className={'segment-container'+(this.props.isSelected?' selected':'')+' '+this.props.className}
        style={this.props.style}>
        <i className={'iconfont icon-'+this.props.platform} style={currentStyle}></i>
        {
          this.props.isBeta?this.renderBeta():null
        }
      </div>
    );
  }
}

IconCell.defaultProps = {
  platform:'ios',
  isBeta:false,
  isSelected:false,
  onClick:()=>{},
  style:{},
  className:'',
  unique:null
}
